
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="favicon.ico"/>
	<title>xiaohong</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/base.css" type="text/css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content ">
	<div class="cv-container">
		<div id="section1" class="section active">
			<div id="top" title="顶部">
				<img src="images/top.png" alt="回到顶部">
			</div>
			<div class="myIntro">
				<h1 class="fade">Hello, I'm RedCarrot</h1>
				<h3 class="fade">一个拥有像素眼的前端工程师</h3>
				<span class="active fade" id="abMe">关于我</span>
				<span id="mypro" class="fade">我的作品</span>
			</div>
			<ul class="bg-img">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

		<div id="section2" class="section">
			<!-- 导航条-->
			<div id="nav-bar" class="bar">
				<div class="container">
					<a href="drip.html"> <div class="fl">RedCarrot博客</div></a>
					<ul class="fr nav-ul">
						<li>关于我</li>
						<li>求职意向</li>
						<li>作品集</li>
						<li>技术掌握</li>
						<li>我的经历</li>
						<li>联系我</li>
					</ul>
					<div class="fr more-nav">
						<img src="images/more.png" alt="更多">
					</div>
				</div>
				<ul class="nav-ul nav-xs-ul">
					<li>关于我</li>
					<li>求职意向</li>
					<li>作品集</li>
					<li>技术掌握</li>
					<li>我的经历</li>
					<li>联系我</li>
				</ul>
			</div>

			<!--关于我-->
			<h2>关于我</h2>
			<hr>
			<div class="center fades">
				<p class="center"><img src="images/header.png" alt="头像" /></p>
				<div class="my-intro">
					<p>我叫肖红，今年23岁，坐标南京，是一名前端工程师。前端是一门有容乃大的行业，我并不是计算机专业出生。
						在自学前端之前，唯一接触过的就是大学里的C语言。庆幸的是JS与C很相像，给我很大的信心来学习。今后的职业规划也是朝着JS发展，目前在学习Angular JS和 Vue.js。</p>
					<p>工作近三年，大的来说，写过响应式页面，移动端页面，pc端页面。小的来说，手机直播，手机商城，视频，相册，地图，无缝轮播等都有涉及。
						很感谢所就职的公司对我的培养，让我学到了很多东西。</p>
				</div>
			</div>
		</div>
		<div id="section3" class="section">
			<h2>求职意向</h2>
			<hr>
			<div class="container center fades">
				<div class="col-md-3 col-xs-6 skill-ps skill">
					<p><img src="images/web.png" alt="切图"></p>
					<p class="ptitle">PS切图</p>
					<p>从PSD上切出页面需要的图片</p>
					<p>将小图标合成spirts优化。</p>
				</div>
				<div class="col-md-3 col-xs-6 skill-web skill">
					<p><img src="images/css.png" alt="css"></p>
					<p class="ptitle">网页制作</p>
					<p>响应式页面,简单不冗余代码。</p>
					<p>css3流畅动画效果，兼容不同浏览器。</p>
				</div>
				<div class="col-md-3 col-xs-6 skill-js skill">
					<p><img src="images/js.png" alt="js"></p>
					<p class="ptitle">前端功能</p>
					<p>用JS完成常见的前端功能特效</p>
					<p>用AJAX读取后台数据。</p>
				</div>
				<div class="col-md-3 col-xs-6 skill-h5 skill">
					<p><img src="images/h5.png" alt="h5"></p>
					<p class="ptitle">h5页面</p>
					<p>移动端页面的书写</p>
					<p>兼容平板、安卓、IOS不同终端。</p>
				</div>
			</div>
		</div>
		<div id="section4" class="section">
			<h2>作品集</h2>
			<hr>
			<div class="container center fades">
				<p class="center intros">写jq前端功能的时候，我的宗旨是能手写就手写，不依赖插件。手写代码更简洁高效，也更能提升自己技术。</p>
				<div class="col-md-3 col-xs-6">
					<div class="imgbox">
						<img src="images/01.jpg" alt="作品配图">
					</div>
					<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6cc1138445f59916&redirect_uri=http://manager.vpuzi.cn/app/info/index/shopid/29&response_type=code&scope=snsapi_userinfo&state=STATE&component_appid=wx1adec164d745b53f#wechat_redirect
" target="_blank">
						<div class="zp-cover">
							<h4>微铺子点餐系统</h4>
							<p>购物车结算jq，订单的选择或删除、金额的计算。（关注“微铺子点单系统即可查看”）</p>
							<img src="images/search.png" alt="查看">
						</div>
					</a>
				</div>
				<div class="col-md-3 col-xs-6">
					<div class="imgbox">
						<img src="images/06.jpg" alt="作品配图">
					</div>
					<a href="http://nanjing.360loushi.com/" target="_blank">
						<div class="zp-cover" style="top: 45%">
							<h4>通过ip测出归属地，匹配相关城市的新闻</h4>
							<p>与后端配合，获取ip，通过ajax传输数据，匹配相对应的城市新闻</p>
							<img src="images/search.png" alt="查看">
						</div>
					</a>
				</div>
				<div class="col-md-3 col-xs-6 ">
					<div class="imgbox">
						<img src="images/02.jpg" alt="作品配图">
					</div>
					<a href="http://advisory.360eol.com" target="_blank">
						<div class="zp-cover">
							<h4>直播类页面</h4>
							<p>直播页面响应式，css3 jq运用较多</p>
							<img src="images/search.png" alt="查看">
						</div>
					</a>
				</div>
				<div class="col-md-3 col-xs-6 ">
					<div class="imgbox">
						<img src="images/03.jpg" alt="作品配图">
					</div>
					<a href="http://yyy.v.360loushi.com/houses" target="_blank">
						<div class="zp-cover">
							<h4>高德地图pc和web双应用</h4>
							<p>运动高德地图的api实现PC端和web端的应用</p>
							<img src="images/search.png" alt="查看">
						</div>
					</a>
				</div>
				<div class="col-md-3 col-xs-6 ">
					<div class="imgbox">
						<img src="images/04.jpg" alt="作品配图">
					</div>
					<a href="http://advisory.360eol.com/96" target="_blank">
						<div class="zp-cover">
							<h4>详情类页面</h4>
							<p>视频播放，评论功能的编写</p>
							<img src="images/search.png" alt="查看">
						</div>
					</a>
				</div>
				<div class="col-md-3 col-xs-6 ">
					<div class="imgbox">
						<img src="images/05.jpg" alt="作品配图">
					</div>
					<a href="http://www.maszy.cn/" target="_blank">
						<div class="zp-cover">
							<h4>官网类首页</h4>
							<p>多数据响应式网页，能兼容不同大小电脑分辨率</p>
							<img src="images/search.png" alt="查看">
						</div>
					</a>
				</div>

				<div class="col-md-3 col-xs-6 ">
					<div class="imgbox">
						<img src="images/07.jpg" alt="作品配图">
					</div>
					<a href="http://360.v.360eol.com/" target="_blank">
						<div class="zp-cover">
							<h4>移动端页面</h4>
							<p>列表页，兼容安卓、ios、平板</p>
							<img src="images/search.png" alt="查看">
						</div>
					</a>
				</div>
				<div class="col-md-3 col-xs-6">
					<div class="imgbox">
						<img src="images/08.jpg" alt="作品配图">
					</div>
					<a href="javascritp:void(0);">
						<div class="zp-cover">
							<h4>微信小程序</h4>
							<p>搜索小程序——“楼市小道”即可查看</p>
							<img src="images/search.png" alt="查看">
						</div>
					</a>
				</div>
			</div>
		</div>
		<div id="section5" class="section">
			<h2>技术掌握</h2>
			<hr>
			<div class="container center fades">
				<div class="col-md-3 col-xs-6">
					<div class="wrap-box">
						<div class="circle-wrap clip-auto">
							<div class="left-clip percent"></div>
							<div class="right-clip percent"></div>
						</div>
						<div class="circle-num">
							<span>90</span>%
						</div>
					</div>
					<p class="ptitle">PS</p>
				</div>
				<div class="col-md-3 col-xs-6">
					<div class="wrap-box">
						<div class="circle-wrap clip-auto">
							<div class="left-clip percent"></div>
							<div class="right-clip percent"></div>
						</div>
						<div class="circle-num">
							<span>85</span>%
						</div>
					</div>
					<p class="ptitle">HTML5/CSS3</p>
				</div>
				<div class="col-md-3 col-xs-6">
					<div class="wrap-box">
						<div class="circle-wrap clip-auto">
							<div class="left-clip percent"></div>
							<div class="right-clip percent"></div>
						</div>
						<div class="circle-num">
							<span>85</span>%
						</div>
					</div>
					<p class="ptitle">JQ</p>
				</div>
				<div class="col-md-3 col-xs-6">
					<div class="wrap-box">
						<div class="circle-wrap clip-auto">
							<div class="left-clip percent"></div>
							<div class="right-clip percent"></div>
						</div>
						<div class="circle-num">
							<span>70</span>%
						</div>
					</div>
					<p class="ptitle">JS</p>
				</div>
			</div>
		</div>
		<div id="section6" class="section">
			<h2>我的经历</h2>
			<hr>
			<div class="container center fades">
				<ul class="my-xp">
					<li>
						<div class="date-box">
							<p>12/2016</p>
							<p>-</p>
							<p>现在</p>
						</div>
						<div class="my-work my-xp-box">
							<strong>360教育在线</strong>
							<p class="ptitle">技术部/Web前端</p>
							<p>负责官网页面制作。PSD切图后构建页面框架</p>
							<p>利用JS、CSS3书写前端功能，让页面更充实丰富</p>
							<p>制作pc端和web端双向页面</p>
							<p>相关小程序页面制作</p>
						</div>
					</li>
					<li>
						<div class="date-box">
							<p>02/2016</p>
							<p>-</p>
							<p>11/2016</p>
						</div>
						<div class="my-work2 my-xp-box">
							<strong>上海甄致科技有限公司（合肥运营中心）</strong>
							<p class="ptitle">技术部/Web前端</p>
							<p>微信端进行二次开发</p>
							<p>利用jq技术进行购物车计算，增加删除订单等功能</p>
							<p>负责公司官网制作等</p>
						</div>
					</li>
					<li>
						<div class="date-box">
							<p>02/2014</p>
							<p>-</p>
							<p>02/2016</p>
						</div>
						<div class="my-work3 my-xp-box">
							<strong>马鞍山志业软件</strong>
							<p class="ptitle">技术部/Web前端</p>
							<p>运用html+css完成静态页面的布局</p>
							<p>利用Bootstrap框架实现响应式布局</p>
							<p>利用phpcms实现页面整合及上线</p>
						</div>
					</li>

				</ul>
			</div>
		</div>
		<div id="section7" class="section">
			<h2>联系我</h2>
			<hr>
			<div class="container center fades fadesin">
				<div class="col-md-6 col-xs-6">
					<div class="er-img">
						<div>
							<img src="images/erweima.png"/>
						</div>
					</div>
					<p class="display">扫一扫二维码，联系我！</p>
				</div>
				<div class="col-md-6 col-xs-6 col-txt">
					<div class="indexContact">
						<h4>肖红</h4>
						<ul>
							<li class="tell">15656519137</li>
							<li class="email"><a href="mailto:service@maszy.cn">1647800113@qq.com</a></li>
							<li class="add">南京市玄武区玄武大道88号</li>
						</ul>
					</div>
				</div>
				</div>
			</div>

		</div>
	</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/main.js"></script>
<!--<script>-->
	<!--(function(){-->
		<!--//百度自动链接推送-->
		<!--var bp = document.createElement('script');-->
		<!--var curProtocol = window.location.protocol.split(':')[0];-->
		<!--if (curProtocol === 'https') {-->
			<!--bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';-->
		<!--}-->
		<!--else {-->
			<!--bp.src = 'http://push.zhanzhang.baidu.com/push.js';-->
		<!--}-->
		<!--var s = document.getElementsByTagName("script")[0];-->
		<!--s.parentNode.insertBefore(bp, s);-->
	<!--})();-->
<!--</script>-->

</body>
</html>